@import "../../style/variables.less";
@import "../../style/mixins/index.less";

@tag-cls: ~"w-tag";

.@{tag-cls}{
  display: inline-block;
  padding: @tag-padding-top @tag-padding-right @tag-padding-bottom @tag-padding-right;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-right: @tag-padding-horizontal;
  svg{
    cursor: pointer;
    position: relative;
    top: -1px;
    margin-left: 2px;
  }
}

.@{tag-cls}-white{
  color: @tag-white-color;
  border: 1px solid @tag-white-border-color;
  padding: @tag-padding-top-white @tag-padding-right;
  background-color:@tag-white-bg;
  svg g {
    stroke: @tag-white-color;
  }
}
.@{tag-cls}-pink{
  background-color: @tag-pink-bg;
}
.@{tag-cls}-red{
  background-color: @tag-red-bg;
}
.@{tag-cls}-yellow{
  background-color: @tag-yellow-bg;
}
.@{tag-cls}-orange{
  background-color: @tag-orange-bg;
}
.@{tag-cls}-green{
  background-color: @tag-green-bg;
}
.@{tag-cls}-cyan{
  background-color: @tag-cyan-bg;
}
.@{tag-cls}-blue{
  background-color: @tag-blue-bg;
}
.@{tag-cls}-purple{
  background-color: @tag-purple-bg;
}

.@{tag-cls}.checkable,.@{tag-cls}.checked{
  cursor: pointer;
}
.@{tag-cls}.checkable{
  background-color: transparent;
  color: initial;
  border-color: transparent;
}